<template>
	
	<!-- 商品列表 -->
	<view class="product-list">
		<view class="product-item" v-for="(item, index) in showProducts" :key="item.id" @click="goDetail(item.id)">
			<image :src="item.coverImage" mode="aspectFill"></image>
			<view class="product-info">
				<text class="product-name">{{ item.name }}</text>
				<text class="product-price">￥{{ item.price }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
			onLoad,
			onShow
		} from "@dcloudio/uni-app"
		import{getProList} from '../../api/product.js'
import { ref } from "vue";
import {
		onReachBottom
	} from '@dcloudio/uni-app';
	
		let showProducts=ref([])
		let fenleiId=ref('')
		let per=ref(10)
		let page=ref(1)
		
		
		onLoad((option) => {
			fenleiId.value=option.id
			console.log(fenleiId.value);
			// 获取传递参数
			dataList()
		})
		onShow(()=>{
			// dataList()
		})
		
		async function dataList(){
			console.log(page.value,per.value,"",fenleiId.value);
			let r1=await getProList(page.value,per.value,"",fenleiId.value);
			console.log(r1.data.data);
				showProducts.value =r1.data.data
			
			
			console.log(showProducts.value);
			
		}
		
		// 上拉触底刷新
		onReachBottom(() => {
			per.value+=10
			dataList();
		});
		
</script>

<style scoped>
	.product-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.product-item {
		width: 48%;
		border: 1px solid #ccc;
		border-radius: 5px;
		overflow: hidden;
	}
	
	.product-item image {
		width: 100%;
		height: 150px;
	}
	
	.product-info {
		padding: 10px;
	}
	
	.product-name {
		font-size: 16px;
		margin-bottom: 5px;
	}
	
	.product-price {
		font-size: 14px;
		color: #f00;
	}
	       
</style>
